<template>
  <div class="">
      <el-button @click="add" type="success" size="small" class="w150 mb20">添加产品</el-button>
        <el-table :data="tableData" border style="width: 100%" header-row-class-name="bgd8">
        <el-table-column prop="productNumber" label="产品编号" width="180"> </el-table-column>
        <el-table-column prop="createTime" label="上架时间" width="180">
            <template slot-scope="scope">
                    <span>{{scope.row.createTime|formatDate}}</span>
            </template>
    </el-table-column>
    <el-table-column prop="firstParentName" label="所属一级分类" width="180"> </el-table-column>
    <el-table-column prop="parentName" label="所属二级分类" width="180"> </el-table-column>
    <!-- <el-table-column label="产品主图">
        <template slot-scope="scope">
            <el-button @click="showImg(scope.row)" type="primary" size="small">查看</el-button>
        </template>
    </el-table-column>
    <el-table-column label="产品附图">
        <template slot-scope="scope">
            <el-button @click="showImg(scope.row)" type="primary" size="small">查看</el-button>
        </template>
    </el-table-column> -->
    <el-table-column label="产品详情">
        <template slot-scope="scope">
            <el-button @click="showDetail(scope.row)" type="primary" size="small">查看</el-button>
        </template>
    </el-table-column>
    <!-- <el-table-column label="产品资质">
        <template slot-scope="scope">
            <el-button @click="showImg(scope.row)" type="primary" size="small">查看</el-button>
        </template>
    </el-table-column> -->
    <el-table-column label="操作 " width="150px">
        <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="info" size="small">编辑</el-button>      
            <el-button type="danger" size="small"  @click="del(scope.row)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination background  layout="prev, pager, next" :total="totalCount" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>
  <el-dialog title="产品图片" class="w750" :visible.sync="dialogTableVisible">
    <div class="detail">
        <img class="portrait" src="../assets/img/bg.png">
        <p>KNY3980-34 高压开头套设备</p>
        <el-button @click="dialogTableVisible=false"  class="w150" type="primary" size="small">确认</el-button>
    </div>
</el-dialog>
<el-dialog title="产品详情" class="w750" :visible.sync="dialogTableVisible_content">
    <div class="detail">
       
        <p>KNY3980-34 高压开头套设备</p>
        
        <el-button @click="dialogTableVisible_content=false"  class="w150" type="primary" size="small">确认</el-button>
    </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        dialogTableVisible:false,
        dialogTableVisible_content:false,
        tableData: [],
        curPage:1,
        totalCount:0
    }
  },
  filters:{
    formatDate(date){
      date=new Date(date);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var day=date.getDate();
      if(month<10){
        month='0'+month;
      }
      return year+'-'+month+'-'+day;
    }
  },
  methods:{
      add(){
          this.$router.push({path:'/home/productAdd'})
      },
      del(data){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'blProduct/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
					    this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      edit(data){
         this.$router.push({path:'/home/productAdd',query:{id:data.id}})
      },
      showDetail(data){
          this.$router.push({path:'/home/productDetail',query:{id:data.id}});
      },
      currentChange(page){
          this.curPage = page;
          this.getRows();
      },
      //上一页
      prevClick(page){
          this.curPage = page;
          this.getRows();
      },
    //  下一页
      nextClick(page){
          this.curPage = page;
          this.getRows();
      },
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'blProduct/page?currentPage='+this.curPage+'&pageNumber='+10).then(response =>{
          if(response.status == 200){
          this.tableData=response.data.data.pp;
          this.totalCount = response.data.data.page.totalNumber;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      }
  },
  created(){
    this.getRows();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .mr10{
        margin-right:10px;
    }
    .detail{
        text-align:center;
    }
    .detail img{
        width:320px;
        height:240px;
        display:block;
        margin:0 auto;
    }
    .detail p{
        margin:20px;
    }
</style>
